<!--
  仅用于各种组件实例标题
  @author 邵鹏坤 2022年9月22日
-->
<template>
  <p :class="props.row ? 'row-title' : 'example-title'">
    <span class="example-title-flag">#</span>
    <span class="example-title-msg">{{ props.title }}</span>
  </p>
</template>

<script setup lang="ts">
  import { defineProps } from 'vue'
  const props = defineProps<{
    title: string
    row?: boolean
  }>()
</script>

<style lang="scss" scoped>
  .example-title {
    font-size: $example-title-fontsize;

    .example-title-msg {
      color: $example-title-msg-color;
    }

    .example-title-flag {
      color: $example-title-flag-color;
    }
  }
  .row-title {
    font-size: 22px;
    margin: 22px 3% 0;
    border: $table-border-color 1px solid;
    border-radius: 8px 8px 0 0;
    padding: 12px;
    .example-title-msg {
      color: #424242;
    }

    .example-title-flag {
      color: #ffab91;
    }
  }
  .example-title-flag {
    margin-left: 14px;
  }
</style>
